<!--
 * @Description: 
 * @Author: zzj
 * @Date: 2021-09-13 14:41:00
 * @LastEditors: zzj
 * @LastEditTime: 2021-09-15 20:40:32
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格显示作业</title>
    <style>
        #left{
            width: 30%;
            float: left;
        }
        #right{
            width: 70%;
            float: left;
        }
        table{
           border-collapse: collapse; 
           width: 100%;
        }
        table td,table th{
            border:1px solid #333;
        }
    </style>
</head>
<body>
    <div id="warp">
        <div id="left">
             读取文件：<input type="file" id="file" />
        </div>
        <div id="right">
            数据表格：
            <table>
                <thead>
                    <th>IP地址</th>
                    <th>访问时间</th>
                    <th>访问用户</th>
                    <th>登录登出(0显示登录，1显示登出)</th>
                </thead>
                <tbody id="tbody"></tbody>
            </table>
        </div>
    </div>

    <script>
        var file = document.getElementById("file");
        file.onchange = function(){
            var read = new FileReader();
            read.onload = function(){
                var res = read.result;
 
                var reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/gm;
                res = res.match(reg); 
                console.log(res)
                
                var ip = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/gm;  //获取ip地址
                var time = /\d{4}\/\d{2}\/\d{2}\s+\d{2}\:\d{2}/gm;  //获取时间
                var name = /\w{1,}/;  //获取用户名
                var num = /\d/;  //获取状态
                /*
                //获取所有的数组
                ips = res.match(ip);
                times = res.match(time);
                names = res.match(name);
                nums = res.match(num);
                //将类数组转回数组类型
                ips = Array.from(ips);  
                times = Array.from(time);
                names = Array.from(name);
                nums = Array.from(num);
                */

                //添加到表格中
                var tbody = document.getElementById("tbody")
                var trs = "",tds = "";
                res.forEach(i => {
                        tds +="<td>";
                        tds += i;
                        tds += "</td>";
                });
                tbody.innerHTML += "<tr><td>";
            }
            read.readAsText(this.files[0]);
        }

    </script>
</body>
</html>